<html>
<head>
	<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
	<meta name="apple-mobile-web-app-capable" content="yes" />
	<meta names="apple-mobile-web-app-status-bar-style" content="black-translucent" />

	<title>Welcome to FunFinder!</title>

	<link rel="stylesheet" href="css-dan/upper_viewtogglebar_draft.css" type="text/css" media="screen" title="no title" charset="utf-8"/>
	<link rel="stylesheet" href="css-dan/upper_timescalingbar_draft.css" type="text/css" media="screen" title="no title" charset="utf-8"/>
	<link rel="stylesheet" href="css-dan/lower_navbar_draft.css" type="text/css" media="screen" title="no title" charset="utf-8"/>
	<link rel="stylesheet" href="css-dan/r_eventlist.css" type="text/css" media="screen" title="no title" charset="utf-8"/>
	<link rel="stylesheet" href="css-dan/mapPane.css" type="text/css" media="screen" title="no title" charset="utf-8"/>
	<link rel="stylesheet" href="css-dan/dan_main_week2.css" type="text/css" media="screen" title="no title" charset="utf-8"/>
	<link rel="stylesheet" href="css-dan/event-description-VIEW.css" type="text/css" media="screen" title="no title" charset="utf-8"/>
	<link rel="stylesheet" href="css-dan/eventRangeBar.css" type="text/css" media="screen" title="no title" charset="utf-8"/>

	<link rel="apple-touch-icon" href="icons-dan/apple-touch-icon.png" />

<!--	<link type="text/css" rel="stylesheet" media="screen" href="../Shre_Settings_week2/jqtouch/jqtouch.css"> -->
<!-- 	<link type="text/css" rel="stylesheet" media="screen" href="../Shre_Settings_week2/themes/apple/theme.css"> -->
 	
	<script type="text/javascript" src="http://www.google.com/jsapi?key=ABQIAAAAZs3OaBh-5aYk6Q1zUcNL6BRjvD8jcpqQzirtpLcZofJRG2oUnBRsGBU2dYtNprUJLXrq4RIsNthzuQ" ></script>
	<script type="text/javascript">	google.load("jquery", '1.3'); google.load("maps", "2.x"); </script>
	<script src="jquery.js" type="text/javascript" charset="utf-8"></script>
	<script src="viewChangeScripts.js" type="text/javascript" charset="utf-8"></script>
	<script src="timeScalingBarScripts.js" type="text/javascript" charset="utf-8"></script>
	<script src="eventDescriptionViewScripts.js" type="text/javascript" charset="utf-8"></script>
	<script src="eventRangeBarScripts.js" type="text/javascript" charset="utf-8"></script>
	<script scr="categories.js" type="text/javascript" charset="utf-8"></script>


	<script type="text/javascript" charset="utf-8">
		
		var currentInterval = 30;
		var currentEventRangeIndex = 1;
		var currentLocation; 

		var currentLat; 
		var currentLon; 

		var selectedEventLat;
		var selectedEventLon;

		var currentEventDistances;
		var currentEventWaitTimes;
		
		function getPosition() {	
			function handlePosition(position) {
				currentLocation = new GLatLng(position.coords.latitude, position.coords.longitude);
				makeMap();
			}
			navigator.geolocation.getCurrentPosition(handlePosition)
		}



		function makeMap() {
			var map = new GMap2($("#map").get(0));
			map.setCenter(currentLocation, 15);
			var blueIcon = new GIcon(G_DEFAULT_ICON);
			blueIcon.image = "http://maps.google.com/intl/en_us/mapfiles/ms/micons/blue-dot.png";
			markerOptions = { icon:blueIcon };
			currentLocationMarker = new GMarker(currentLocation, markerOptions);
			map.addOverlay(currentLocationMarker);	

			currentLat = currentLocation.lat();
			currentLon = currentLocation.lng();

			var markerData = loadMarkerData(map);
			var markers = createMarkers(markerData);
			for (var j = 0; j < markers.length; j++) {
				map.addOverlay(markers[j]); 
			}
			addClickability(markers, map, markerData);
		}




		function loadMarkerData(map) {		
			// setup 10 random points
			var bounds = map.getBounds();
			var southWest = bounds.getSouthWest();
			var northEast = bounds.getNorthEast();
			var lngSpan = northEast.lng() - southWest.lng();
			var latSpan = northEast.lat() - southWest.lat();

			// This is a dummy array of markers from our internal database of markers
			
			var markerData = [10];
			
			markerData[0] = [southWest.lat() + latSpan * Math.random(), southWest.lng() + lngSpan * Math.random(),
				"Name1", "Category", "Host", "Start Time", "End Time", "Location", "Description description description"];
			markerData[1] = [southWest.lat() + latSpan * Math.random(), southWest.lng() + lngSpan * Math.random(),
				"Name2", "Category", "Host", "Start Time", "End Time", "Location", "Description description description"];
			markerData[2] = [southWest.lat() + latSpan * Math.random(), southWest.lng() + lngSpan * Math.random(),
				"Name3", "Category", "Host", "Start Time", "End Time", "Location", "Description description description"];
			markerData[3] = [southWest.lat() + latSpan * Math.random(), southWest.lng() + lngSpan * Math.random(),
				"Name4", "Category", "Host", "Start Time", "End Time", "Location", "Description description description"];
			markerData[4] = [southWest.lat() + latSpan * Math.random(), southWest.lng() + lngSpan * Math.random(),
				"Name5", "Category", "Host", "Start Time", "End Time", "Location", "Description description description"];
			markerData[5] = [southWest.lat() + latSpan * Math.random(), southWest.lng() + lngSpan * Math.random(),
				"Name6", "Category", "Host", "Start Time", "End Time", "Location", "Description description description"];
			markerData[6] = [southWest.lat() + latSpan * Math.random(), southWest.lng() + lngSpan * Math.random(),
				"Name7", "Category", "Host", "Start Time", "End Time", "Location", "Description description description"];
			markerData[7] = [southWest.lat() + latSpan * Math.random(), southWest.lng() + lngSpan * Math.random(),
				"Name8", "Category", "Host", "Start Time", "End Time", "Location", "Description description description"];
			markerData[8] = [southWest.lat() + latSpan * Math.random(), southWest.lng() + lngSpan * Math.random(),
				"Name9", "Category", "Host", "Start Time", "End Time", "Location", "Description description description"];
			markerData[9] = [southWest.lat() + latSpan * Math.random(), southWest.lng() + lngSpan * Math.random(),
				"Name10", "Category", "Host", "Start Time", "End Time", "Location", "Description description description"];
			//alert(markerData);
			return markerData;
		}



		function createMarkers(markerData) {

			var markers = [];
			for (var i = 0; i < markerData.length; i++) {
			   	var point = new GLatLng(markerData[i][0], markerData[i][1]);
				
				var blueIcon = new GIcon(G_DEFAULT_ICON);
				blueIcon.image = "http://maps.google.com/intl/en_us/mapfiles/ms/micons/blue-dot.png";
				var letter = String.fromCharCode("A".charCodeAt(0) + i);
				blueIcon.image = "http://maps.google.com/mapfiles/marker" + letter + ".png";
				markerOptions = { icon:blueIcon };

				marker = new GMarker(point, markerOptions);
				markers[i] = marker;
			} 
			return markers;
		} 



	
		function addClickability(markers, map, markerData) {

			$(markers).each(function(i,marker){
				var markerDescription = ( "("+String.fromCharCode("A".charCodeAt(0) + i)+") " + markerData[i][2] 
					+ "<br>Event Category: " + markerData[i][3]
					+ "<br>Host: " + markerData[i][4]
					+ "<br>Start Time: " + markerData[i][5]
					+ "<br>End Time: " + markerData[i][6]
					+ "<br>Location: " + markerData[i][7]
					+ "<br>Description: " + markerData[i][8] );
				$("<li />")
					
					.html(markerDescription)
					.click(function(){
						displayPoint(marker, i);
					})
					.appendTo("#list");
				
				GEvent.addListener(marker, "click", function(){
					
					displayPoint(marker, i);
				});
				
				
			});
			
			for (var i = 0; i < 10; i++) {
				var eventId = "eventList_event" + i;
				document.getElementById('list').getElementsByTagName('li')[i].setAttribute('id',eventId); 
			}
			

			
			$("#message").appendTo(map.getPane(G_MAP_FLOAT_SHADOW_PANE));
			
			function displayPoint(marker, index){
				$("#message").hide();
				
				var moveEnd = GEvent.addListener(map, "moveend", function(){
					var markerOffset = map.fromLatLngToDivPixel(marker.getLatLng());
					$("#message")
						.html(index)
						.fadeIn()
						.css({ top:markerOffset.y, left:markerOffset.x });
				
					GEvent.removeListener(moveEnd);
				});
				map.panTo(marker.getLatLng());
				var eventName = markerData[index][2];

				selectedEventLat = markerData[index][0];
				selectedEventLon = markerData[index][1];
				
				//alert(eventName);
				showEventDescription(index, eventName);
			}
		}



$(document).ready(init);
function init() {		
	var el = $('#increaseIntervalButton');
	el.click(increaseInterval);
	var el2 = $('#decreaseIntervalButton');
	el2.click(decreaseInterval);

	var el3 = $('#maponly_button');
	el3.click(showMapOnly);
	var el4 = $('#listonly_button');
	el4.click(showListOnly);
	var el5 = $('#splitscreen_button');
	el5.click(showSplitScreen);

	var el6 = $('#eventDescription_backButton');
	el6.click(goBackToMainScreen);
	var el7 = $('#eventDescription_directionsButton');
	el7.click(goToDirectionsScreen);

	var el8 = $('#sortbytime_button');
	el8.click(sortbytime);
	var el9 = $('#sortbydistance_button');
	el9.click(sortbydistance);

	var el10 = $('#preference_likeButton');
	el10.click(acceptPositiveFeedback);
	var el11 = $('#preference_dislikeButton');
	el11.click(acceptNegativeFeedback);

	var el12 = $('#increaseEventRangeButton');
	el12.click(increaseEventRange);

	var el13 = $('#decreaseEventRangeButton');
	el13.click(decreaseEventRange);
	

}


	</script>







</head>
<body onload='getPosition()'>




<div class="eventDescription_nametoolbar eventDescription_toolbars">
	<div id="eventnamelabel"></div>
</div>

<div class="eventDescription_uppernavbar eventDescription_toolbars">
	<div id="eventDescription_backButton" 
	class="eventDescription_navbutton">Back</div>
	<div id="eventDescription_directionsButton" 
	class="eventDescription_navbutton">Close FunFinder & Get Google Directions</div>
</div>



<div class="viewtogglebar_container">
	<div id="maponly_button" class="viewtoggle">
	MAP VIEW
	</div>
	<div class="viewtoggle viewtoggledivider"></div>
	<div id="splitscreen_button" class="viewtoggle">
	SPLIT-SCREEN
	</div>
	<div class="viewtoggle viewtoggledivider"></div>
	<div id="listonly_button" class="viewtoggle">
	LIST VIEW
	</div>
</div>




<div class="timescalingbar_container">
	<div id="increaseIntervalButton"
	class="timeScalingBarObject intervalChangeButton"> + </div>
	<span id="currentInterval"
	class="timeScalingBarObject"> within 30 minutes </span>
	<div id="decreaseIntervalButton"
	class="timeScalingBarObject intervalChangeButton"> - </div>
	<div id="timeScalingTextLabel"
	class="timeScalingBarObject">Showing Events Starting:</div>
</div>





<div id="splitscreenview" class="content">
	<div class="mapcontainer">
		<div id="map"></div>
<!--		<div id="message" style="display:none;">test text</div> -->
	</div>
	<div class="eventlist">
		



<div class="eventListToolbar">

<div id="preference_label" 
class="eventDescription_preferenceObjects eventListToolbar">Give feedback:</div>

<div id="preference_likeButton"
class="eventDescription_preferenceObjects preferenceButton eventListToolbar">:)</div>

<div id="preference_dislikeButton" 
class="eventDescription_preferenceObjects preferenceButton eventListToolbar">:(</div>



<div id="sortbytime_button" 
class="eventList_sortButton">Soonest</div>

<div id="sortbydistance_button" 
class="eventList_sortButton">Closest</div>

<div id="sort_label" 
class="eventList_sortButton">Sort by:</div>

</div>


		<ul id="list" class="eventlist">
		</ul>
	</div>
</div>




<div class="eventRangeBar_container">

	<div id="eventRangeBar_Label"
	class="eventRangeBar_object">Showing<br>Events:</div>

	<div id="decreaseEventRangeButton"
	class="eventRangeBar_object eventRangeBar_button">Prev.<br>10</div>

	<span id="eventRange"
	class="eventRangeBar_object">1 - 10</span>

	<div id="increaseEventRangeButton"
	class="eventRangeBar_object eventRangeBar_button">Next<br>10</div>

</div>

<a href="shre_settings3.html">
<div id="settings_button" class="navbar_button">
SETTINGS
</div>
</a>


</body>

</html>
